<!DOCTYPE html>
<html>
<head>
    <title>登录测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 40px; }
        .test-section { margin: 20px 0; padding: 20px; border: 1px solid #ddd; }
        button { padding: 10px 15px; margin: 5px; cursor: pointer; }
        .result { background: #f5f5f5; padding: 10px; margin: 10px 0; }
    </style>
</head>
<body>
    <h1>🧪 登录流程测试</h1>
    
    <div class="test-section">
        <h3>1. 检查localStorage状态</h3>
        <button onclick="checkLocalStorage()">检查localStorage</button>
        <div id="localStorageResult" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>2. 模拟登录</h3>
        <button onclick="simulateLogin()">模拟登录</button>
        <div id="loginResult" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>3. 测试路由跳转</h3>
        <button onclick="testNavigation()">测试跳转到主页</button>
        <div id="navigationResult" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>4. 清除所有数据</h3>
        <button onclick="clearAll()">清除localStorage</button>
        <div id="clearResult" class="result"></div>
    </div>

    <script>
        function checkLocalStorage() {
            const keys = ['userToken', 'userInfo', 'userMode', 'auth_token', 'user_info', 'isLoggedIn'];
            let result = '<h4>localStorage内容:</h4>';
            
            keys.forEach(key => {
                const value = localStorage.getItem(key);
                result += `<p><strong>${key}:</strong> ${value || '(不存在)'}</p>`;
            });
            
            document.getElementById('localStorageResult').innerHTML = result;
        }
        
        function simulateLogin() {
            // 模拟用户登录数据
            const userInfo = {
                id: 'gray_admin',
                username: 'admin',
                email: 'admin@gray-mode.com',
                role: '高级测试开发工程师',
                joinDate: '2023-01-15',
                activeProjects: 12,
                monthlyExecutions: 156,
                passRate: '89%',
                mode: 'gray'
            };
            
            // 保存到localStorage (userStore格式)
            localStorage.setItem('userToken', 'mock-token-' + Date.now());
            localStorage.setItem('userInfo', JSON.stringify(userInfo));
            localStorage.setItem('userMode', 'gray');
            
            // 保存到localStorage (authStore格式)
            localStorage.setItem('auth_token', 'mock-token-' + Date.now());
            localStorage.setItem('user_info', JSON.stringify(userInfo));
            localStorage.setItem('isLoggedIn', 'true');
            
            document.getElementById('loginResult').innerHTML = '<p style="color: green;">✅ 模拟登录完成，数据已保存到localStorage</p>';
        }
        
        function testNavigation() {
            // 检查当前URL
            const currentUrl = window.location.href;
            
            // 尝试跳转到主页
            if (currentUrl.includes('localhost:3001')) {
                window.location.href = 'http://localhost:3001/main';
            } else {
                document.getElementById('navigationResult').innerHTML = '<p style="color: orange;">⚠️ 请在Vue应用中测试导航</p>';
            }
        }
        
        function clearAll() {
            const keys = ['userToken', 'userInfo', 'userMode', 'auth_token', 'user_info', 'isLoggedIn'];
            keys.forEach(key => localStorage.removeItem(key));
            
            document.getElementById('clearResult').innerHTML = '<p style="color: red;">🗑️ 所有登录数据已清除</p>';
        }
        
        // 页面加载时自动检查
        window.onload = function() {
            checkLocalStorage();
        }
    </script>
</body>
</html>